@import "~@angular/material/theming";

// variables

$viewport-max-width: 960px;
$viewport-offset-x: 16px;

// mixins

@mixin viewport-width($padding: true) {
  margin: 0 auto;
  max-width: $viewport-max-width;

  @if ($padding) {
    padding-left: $viewport-offset-x;
    padding-right: $viewport-offset-x;
  }
}

// style

:host {
  display: block;
}

.mat-tab-nav-bar--sticky {
  @include mat-elevation(6);
  transition: box-shadow .3s ease-out;
}

.mat-tab-nav-bar ::ng-deep {
  position: sticky;
  top: 0;
  z-index: 24;

  .mat-ink-bar {
    border-radius: 3px 3px 0 0;
    height: 3px;
  }

  .mat-tab-link {
    margin: 0 $viewport-offset-x;
    min-width: 0;
    padding: 0;
    text-decoration: none;
    transition: all 0.2s ease-out;
  }

  .mat-tab-link:not(.mat-tab-label-active):hover {
    transform: translateY(-1px);
  }

  .mat-tab-link:hover,
  .mat-tab-label-active {
    opacity: 1;
  }

  .mat-tab-link-container {
    @include viewport-width($padding: false);
  }

  // start - workaround for responsive tabs
  .mat-tab-header-pagination {
    display: none !important;
  }

  .mat-tab-link-container {
    overflow: auto;
  }

  .mat-tab-list {
    transform: unset !important;
  }
  // end - workaround
}

.mat-toolbar ::ng-deep {

  .mat-toolbar-row {
    @include viewport-width();
  }

  .mat-icon-button {
    transition: all 0.2s ease-out;

    &:hover {
      transform: translateY(-2px);
    }
  }
}

.outlet-wrapper {
  @include viewport-width();
  margin-top: $viewport-offset-x;
  margin-bottom: $viewport-offset-x;
  position: relative;
}
